<!--
 * @Description: 描述
 * @Author: liym
 * @Date: 2025-05-08 20:14:38
 * @LastEditors: liym
 * @LastEditTime: 2025-05-10 16:58:34
-->
<template>
  <view class="order-list">
     <!-- 新增按钮和搜索框容器 -->
       <view class="button-search-container">
         <button @click="showAddModal" size='mini'>新增订单</button>
          <uni-search-bar @confirm="searchOrders" :focus="true" 
          placeholder="输入订单ID搜索" 
          @cancel="handleSearchCancel" @clear="handleSearchClear">
        </uni-search-bar>
        
       </view>

    <!-- 订单表格 -->
    <view class="table-container">
      <uni-table>
        <uni-tr>
          <uni-th align="center">订单ID</uni-th>
          <uni-th align="center">金额</uni-th>
          <uni-th align="center">时间</uni-th>
          <uni-th align="center">代理人</uni-th>
          <uni-th align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="order in orders" :key="order.id">
          <uni-td>{{ order.id }}</uni-td>
          <uni-td>{{ order.amount }} 元</uni-td>
          <uni-td>{{ order.createTime }}</uni-td>
          <uni-td>{{ order.agentName }}</uni-td>
          <uni-td>
            <button size="mini" @click="showEditModal(order)">编辑</button>
            <button size="mini" @click="deleteOrder(order.id)">删除</button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!-- 分页组件 -->
    <uni-pagination :total="total" :current="page" @change="handlePageChange" />
  </view>
</template>

<script>
import { getOrdersApi, updateOrderApi, addOrderApi, deleteOrderApi } from '@/api';
export default {
  data() {
    return {
      orders: [],
      total: 0,
      page: 1,
      searchValue: '',
      addModalVisible: false,
      editModalVisible: false,
      newOrder: {
        id: '',
        amount: '',
        createTime: '',
        agentName: ''
      },
      editedOrder: {
        id: '',
        amount: '',
        createTime: '',
        agentName: ''
      }
    };
  },
  methods: {
    // 搜索订单
    searchOrders(keyword) {
      // 这里添加搜索订单的逻辑，例如向后端发送请求
      this.searchValue = keyword
      console.log('搜索订单', keyword);
      this.getList()
    },
    handleSearchCancel () {
      
    },
    handleSearchClear () {
      this.searchValue = ''
    },
    // 删除订单
    deleteOrder(id) {
      // 这里添加删除订单的逻辑，例如向后端发送请求
      this.orders = this.orders.filter(order => order.id!== id);
      console.log('删除订单:', id);
    },
    // 处理分页变化
    handlePageChange(newPage) {
      this.page = newPage;

      // 这里添加处理分页变化的逻辑，例如向后端发送请求获取新数据
      console.log('切换到第', newPage, '页');
    },
    // 显示新增订单模态框
    showAddModal() {
      // this.addModalVisible = true;
      // this.newOrder = {
      //   id: '',
      //   amount: '',
      //   createTime: '',
      //   agentName: ''
      // };
      uni.navigateTo({
        url: '/pages/admin/orderform'
      });
    },
    // 新增订单
    addOrder() {
      // this.orders.push({ ...this.newOrder });
      // this.addModalVisible = true;
      // console.log('新增订单:', this.newOrder);
    },
    // 显示编辑订单模态框
    showEditModal(order) {
      this.editModalVisible = true;
      this.editedOrder = { ...order };
    },
    // 更新订单
    updateOrder() {
      const index = this.orders.findIndex(order => order.id === this.editedOrder.id);
      if (index!== -1) {
        this.orders[index] = { ...this.editedOrder };
      }
      this.editModalVisible = false;
      console.log('更新订单:', this.editedOrder);
    },
    async getList () {
      uni.showLoading({
						title: 'loading',
						mask: true
      });
      try {
        await getOrdersApi({
          currentPage: this.page,,
          pageSize: 10,
          agentId: this.searchValue
        })
      } finally {
        uni.hideLoading()
      }
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style scoped>
.order-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}

.button-search-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.button-search-container button {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
  margin-bottom: 0;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  height: auto; 
  padding: 5px 10px; 
}

uni-search-bar {
  flex: 1;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

uni-pagination {
  margin-top: 10px;
}
</style>    